/*
 * @Author: your name
 * @Date: 2020-12-10 11:08:44
 * @LastEditTime: 2020-12-15 20:30:12
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \H5 2010 studyd:\phpStudy\WWW\proj\gulpfile.js
 */

const gulp = require('gulp'),
    htmlmin = require('gulp-htmlmin'),
    del = require('del'),
    sass = require('gulp-sass'),
    cleanCss = require('gulp-clean-css'),
    babel = require('gulp-babel'),
    uglify = require('gulp-uglify'),
    connect = require('gulp-connect'),
    {createProxyMiddleware} = require('http-proxy-middleware')

// 定义一个对象 集中管理所有路径
const path = {
    htmlPath:{
        src:'src/**/*.html',
        dest:'dist'
    },
    sassPath:{
        src:'src/sass/**/*.scss',
        dest:'dist/css'
    },
    jsPath:{
        src:'src/js/**/*.js',
        dest:'dist/js'
    },
    imgPath:{
        src:'src/images/**/*.*',
        dest:'dist/images'
    },
    libPath:{
        src:'src/lib/**/**',
        dest:'dist/lib'
    },
    iconPath:{
        src:'src/*.ico',
        dest:'dist'
    }
}

// 定制了一个删除 dist 目录的任务 (del)
const delDist = () => del('dist')

// 数据解构
const {htmlPath,sassPath,jsPath,imgPath,libPath,iconPath} = path

// 定制 html 任务(gulp-htmlmin)
const html =() => {
    return gulp.src(htmlPath.src)
            .pipe(htmlmin({
                removeComments: true, // 清除HTML注释
                collapseWhitespace: true, // 压缩HTML
                collapseBooleanAttributes: true, // 省略布尔属性的值 <input checked="true"/> ==> <input checked />
                removeEmptyAttributes: true, // 删除所有空格作属性值 <input id="" /> ==> <input />
                removeScriptTypeAttributes: false, // 删除<script>的type="text/javascript"
                removeStyleLinkTypeAttributes: false, // 删除<style>和<link>的type="text/css"
                minifyJS: true, // 压缩页面JS
                minifyCSS: true // 压缩页面CSS 
              }))
            .pipe(gulp.dest(htmlPath.dest))
            .pipe(connect.reload())
}

// 定制 css 任务   1、把所有 scss 转为 css(node-sass、gulp-sass)  2、压缩 css 代码( gulp-clean-css)
const css = () => {
    return gulp.src(sassPath.src)
            .pipe(sass())
            .pipe(cleanCss())
            .pipe(gulp.dest(sassPath.dest))
            .pipe(connect.reload())
}

// 定制 js 任务  1、把所有 ES6 转为 ES5 (gulp-babel、@babel/core、@babel/preset-env)  2、压缩 js (gulp-uglify) 
const js = () => {
    return gulp.src(jsPath.src)
            .pipe(babel({
                presets: ['@babel/env']
              }))
            .pipe(uglify())
            .pipe(gulp.dest(jsPath.dest))
            .pipe(connect.reload())
}

// 把所有的 img 复制到 dist 目录
const img = () => gulp.src(imgPath.src).pipe(gulp.dest(imgPath.dest))

// 把 lib 文件夹下面的所有东西复制到 dist 目录
const lib = () => gulp.src(libPath.src).pipe(gulp.dest(libPath.dest))

// 复制 icon
const icon = () => gulp.src(iconPath.src).pipe(gulp.dest(iconPath.dest))


// 监控html,sass,js 文件夹 当里面的文件发生改变时 再次执行任务
const watch = () => {
    gulp.watch(htmlPath.src,html)
    gulp.watch(sassPath.src,css)
    gulp.watch(jsPath.src,js)
    gulp.watch(imgPath.src,img)

}

// 开启一个服务器  gulp-connect
const server = () =>{
    connect.server({
        livereload:true, 
        port:2400,
        root:'dist',
        middleware () {
            // 代理跨域：把以/api开头的请求代理到rap2的接口
            return [
              createProxyMiddleware('/api', {
                target: 'http://rap2api.taobao.org/',
                changeOrigin: true,
                pathRewrite: {
                          '^/api':''
                      }
              })
            ]
          }
    })
}

// 默认任务 执行每一个任务
module.exports.default = gulp.series(delDist,gulp.parallel(html,css,js,img,lib,icon,watch,server))
